<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>
<style>
    .all{
        width: 1000px;
        height: 350px;
        margin: auto;
        position: relative;
    }
    .left{
        width: 100px;
        height: 150px;
        background-image: url("img/left.png");
        position: absolute;
        top: 80px
    }
    .right{
        width: 100px;
        height: 150px;
        background-image: url("img/right.png");
        position: absolute;
        top: 80px;
        right: 40px;
    }
    .change{
        width: 960px;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .point{
        width: 15px;
        height: 15px;
        border: 2px solid #000;
        border-radius: 50%;
    }
    .point:hover{background-color: #000;}
</style>
<body>
    <div class="all">
        <div class="left"></div>
        <div class="img">
            <img src="./img/01.jpeg"/>
        </div>
        <div class="right"></div>
        <div class="change">
            <!-- 自动生成圆点的标签格式
                <div class="point"></div> -->
        </div>
        <button>自动轮播</button>
    </div>  
    <script>
        let data=['./img/01.jpeg', './img/02.jpeg', './img/03.jpeg', './img/04.jpeg']
        let img=document.querySelector('img')
        let left=document.querySelector('.left')
        let right=document.querySelector('.right')
        let change=document.querySelector('.change')
        let all=document.querySelector('.all')
        let point=[]//图片下方的圆点集合
        data.forEach((v,i) =>{//自动生成圆点
            point[i]=document.createElement('div')
            point[i].className='point'
            point[i].dataset.i=i
            change.appendChild(point[i])
        })
        all.addEventListener('click',(e)=>{//事件代理
            if(e.target.className==='point'){
                let index=e.target.getAttribute('data-i')
                img.src=data[index]
            }
            if(e.target.className==='left'){
                let i=data.indexOf(img.getAttribute('src'))
                if(i>0)img.src=data[i-1]
                else img.src=data[i-1+data.length]
            }
            if(e.target.className==='right'){
                let i=data.indexOf(img.getAttribute('src'))
                if(i<data.length-1)img.src=data[i+1]
                else img.src=data[i+1-data.length]
            }
            if(e.target.localName==='button'){
                let timer=setInterval(()=>{//自动轮播
                let i=data.indexOf(img.getAttribute('src'))
                if(i<data.length-1)img.src=data[i+1]
                else img.src=data[i+1-data.length]
                },1500)
            }
        })
        
    </script> 
</body>
</html>